<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script>
    $(document).ready(function () {
            $(".flip").click(function () {
                $(".panel").slideToggle("slow")
            });
        });
    </script>
    <style>
        div.panel, p.flip {
            margin: 0;
            padding: 5px;
            text-align: center;
            background: yellowgreen;
            border: solid 1px #c3c3c3;
        }

        div.panel {
            height: 180px;
            display: none;
        }
    </style>
</head>
<body>
<div class="panel">
    <p>静夜思</p>
    <p>床前明月光，</p>
    <p>疑是地上霜。</p>
    <p>举头望明月，</p>
    <p>低头思故乡。</p>
</div>
<p class="flip">点击这里展示《静夜思》再次点击则收起《静夜思》</p>
</body>
</html>